<!--Deprecated-->
<template>
  <div style="width:100%;height:100%;">
    <div class="model4Title">
      <div class="title">
        未覆盖区站33
        <span v-if="data.length">（检测建议：“{{ data[0].lineName }}”漏检测区站较多，请重点关注）</span>
      </div>
      <div>
        <div class="dialogTabs">
          <div />
          <div style="display: flex">
            <el-select
              v-model="directionId"
              :popper-append-to-body="false"
              popper-class="select"
              placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.directionId"
                :label="item.directionName"
                :value="item.directionId" />
            </el-select>

            <el-date-picker
              v-model="date"
              popper-class="indexDialog2"
              type="monthrange"
              :picker-options="pickerOptions"
              value-format="yyyy-MM"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期" />
          </div>
        </div>
      </div>
    </div>
    <div id="model4Content" class="model4Content" />
  </div>
</template>
<script>
import { formatDate } from '@/utils/date.js'
import { getDirection, uncoveredAreaStation } from '@/api/cms/index/index.js'
import echarts from 'echarts'
export default {
  props: {
    ctype: {
      type: String,
      default: ''
    },
    railTypes: {
      type: String,
      default: ''
    }
  },
  data() {
    const date1 = new Date(new Date().setFullYear(new Date().getFullYear() - 1))

    return {
      directionId: '',
      date: [formatDate(date1, 'yyyy-MM'), formatDate(new Date(), 'yyyy-MM')],
      data: [],
      options: [],
      pickerOptions: {
        disabledDate: time => {
          const day = 365 * 24 * 3600 * 1000 // 31536000000
          // 返回小于当前日期并近一年内的日期
          return time.getTime() > Date.now() || time.getTime() < (Date.now() - 8.64e7) - day
        }
      }
    }
  },
  watch: {
    date() {
      this.init()
    },
    directionId() {
      this.init()
    },
    ctype() {
      this.init()
    }
  },

  mounted() {
    getDirection().then(res => {
      this.options = res.data
      if (this.options) {
        this.directionId = this.options[0].directionId
      }
    })
    this.init()
    console.log()
  },
  methods: {

    init() {
      uncoveredAreaStation({
        beginYearMonth: this.date ? this.date[0] : '',
        endYearMonth: this.date ? this.date[1] : '',
        directionId: this.directionId,
        cType: this.ctype,
        railTypeList: this.railTypes.split(',')
      }).then(res => {
        const that = this
        const title = []
        this.data = res.data
        res.data.forEach(item => {
          title.push(item.lineName)
          item.name = item.lineName
          item.value = item.num
        })

        const myChart3 = echarts.init(document.getElementById('model4Content'))

        const optons = {
          xAxis: {
            type: 'category',
            data: title,
            axisLabel: {
              show: true,
              textStyle: {
                color: '#fff' // 这里用参数代替了
              }
            },
            axisLine: {
              lineStyle: {
                color: '#2C50B4',
                width: 1// 这里是为了突出显示加上的
              }
            }
          },
          grid: {
            top: '5%',
            left: '3%',
            right: '3%',
            bottom: '15%'
          },
          yAxis: {
            type: 'value',
            'splitLine': { // 网格线
              'show': false
            },

            axisLabel: {
              show: true,
              interval: 0,
              textStyle: {
                color: '#fff' // 这里用参数代替了
              }
            },
            axisLine: {
              lineStyle: {
                color: '#2C50B4',
                width: 1// 这里是为了突出显示加上的
              }
            }
          },
          series: [
            {
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(
                    0,
                    1,
                    0,
                    0,
                    [
                      {
                        offset: 0,
                        color: '#1254FF' // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: '#12F1FF' // 100% 处的颜色
                      }
                    ],
                    false
                  )
                }
              },
              barWidth: 20,
              data: res.data,
              type: 'bar'
            }
          ]
        }
        myChart3.setOption(optons)
        if (res.data[0]) {
          that.$emit('dailog4Click', {
            directionId: that.directionId,
            date: that.date, ...res.data[0]
          })
        }
        myChart3.on('click', function(params) {
          that.$emit('dailog4Click', {
            directionId: that.directionId,
            date: that.date, ...params.data
          })
        })
      })
    }
  }
}
</script>
<style  scoped>
.model4Title {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  padding-bottom: 0;
}
.model4Title .title {
  font-weight: 500;
  font-size: 16px;
  color: #fff;
}
.model4Title .title span {
  font-size: 14px;

  color: #c0796a;
}
.dialogTabs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 36px;
}
.dialogTabsAction {
  background: #0a2b52 !important;
  border: 1px solid #66ffff !important;
  box-sizing: border-box;
  color: rgba(102, 255, 255, 1) !important;
}
.dialogtabLis {
  padding: 0 12px;
  height: 36px;
  background: #0f1f56;
  border: 1px solid rgba(84, 113, 255, 0.6);
  line-height: 36px;
  text-align: center;
  font-weight: 350;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
}
/deep/.el-select {
  width: 150px;
  margin-right: 20px;
}
/deep/.el-select-dropdown__list {
  border: 1px solid rgba(102, 255, 255, 0.15);
}
/deep/.el-select-dropdown__item.selected.hover {
  color: rgba(102, 255, 255, 1) !important;
}
/deep/ .el-select-dropdown__item {
  color: #fff;
}
/deep/.el-select-dropdown__item.hover,
/deep/.el-select-dropdown__item:hover {
  background: rgba(102, 255, 255, 0.1) !important;
  color: #fff !important;
}
/deep/.el-select-dropdown {
  background-color: #0f1f56 !important;
  border: 0;
}
/deep/.el-popper[x-placement^="bottom"] .popper__arrow {
  display: none;
}
/deep/.el-input__inner {
  background: #0f1f56;
  color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(84, 113, 255, 0.6);
  box-sizing: border-box;
  border-radius: 2px;
}

.model4Content {
  height: calc(100% - 56px);
}
</style>
